import React from 'react';
import styles from './index.module.css';
import {channelSource} from './type'
/**
 *
 * @param {*} props
 *  - @channelSource  {iconSrc: string, title: strirng, path: string}[] 所有选项
 *  - @bgcolor string 背景色
 * @returns
 */


const Channel = ({ channelSource, bgcolor }:{channelSource:channelSource[],bgcolor?:string}) => {

    const itemWidth = ~~(1/channelSource.length*100)+'%';
    const renderItem = channelSource.map((item, index) => {
        const { iconSrc, title, path } = item;
        return (
            <div key={index} className={styles['item-wrap']} style={{width:itemWidth}}>
                <div className={styles['icon-wrap']}><img src={iconSrc} alt="" style={{width:'60%'}}/></div>
                <div className={styles['title-wrap']}>{title}</div>
            </div>
        )
    })

    return (
        <div className={styles['channel-wrap']} style={{ backgroundColor: bgcolor }}>
            {renderItem}
        </div>
    )
}

export default Channel;